<nz-layout class="layout">
  <nz-layout>
    <div class="logo dark-bg">
      <img [src]="LOGO_CDN" />
      <span class="site-title">{{ settings.sideTitle || title }}</span>
    </div>
    <ul nz-menu nzMode="inline" class="sider dark-scrollbar">
      <li
        nz-submenu
        *ngFor="let item of websiteList; index as pageIdx"
        (nzOpenChange)="openMenu(item, pageIdx)"
        [nzTitle]="titleTpl"
        [nzOpen]="item['collapsed']"
      >
        <ng-template #titleTpl>
          <img *ngIf="item.icon" class="sideicon" [src]="item.icon" />
          <span>{{ item.title }}</span>
        </ng-template>

        <ul>
          <li
            nz-menu-item
            *ngFor="let el of item.nav; let idIdx = index"
            [nzSelected]="page === pageIdx && id === idIdx"
            (click)="handleSidebarNav(pageIdx, idIdx)"
          >
            <img *ngIf="el.icon" class="sideicon fixicon" [src]="el.icon" />
            <span>{{ el.title }}</span>

            <div
              *ngIf="page === pageIdx && id === idIdx"
              (click)="onCollapseAll($event)"
              class="collapse-wrapper"
            >
              <i
                class="iconfont iconweibiaoti25 collapse"
                [class.active]="collapsed()"
              >
              </i>
            </div>
          </li>
        </ul>
      </li>
    </ul>

    <nz-layout class="inner-layout">
      <div class="search-header" *ngIf="settings.sideThemeImages.length > 0">
        <app-swiper
          [images]="settings.sideThemeImages"
          [autoplay]="settings.sideThemeAutoplay"
          [height]="settings.sideThemeHeight"
        >
          <app-search-engine></app-search-engine>
        </app-swiper>
      </div>

      <nz-content class="content" id="content">
        <app-web-list [search]="false"></app-web-list>

        <div class="box">
          <div *ngIf="currentList.length > 0; else noData">
            <div
              *ngFor="let item of currentList.slice(0, sliceMax); let i = index"
            >
              <div class="nav-wrapper">
                <app-toolbar-title
                  [dataSource]="item"
                  (onCollapse)="onCollapse(item, i)"
                  [index]="i"
                  arrowType="2"
                >
                </app-toolbar-title>

                <div
                  nz-row
                  [nzGutter]="[16, 16]"
                  [style.display]="item.collapsed ? 'none' : ''"
                >
                  <div
                    *ngFor="let el of item.nav.slice(0, sliceMax); index as j"
                    class="gutter-row"
                    nz-col
                    [nzSpan]="6"
                    [nzXs]="24"
                    [nzSm]="12"
                    [nzMd]="12"
                    [nzLg]="8"
                    [nzXl]="6"
                    [nzXXl]="settings.sideCardStyle === 'example' ? 4 : 6"
                  >
                    <app-card
                      [cardStyle]="settings.sideCardStyle"
                      [dataSource]="el"
                      [indexs]="[page, id, i, j]"
                    ></app-card>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <ng-template #noData>
            <app-no-data></app-no-data>
          </ng-template>
        </div>

        <app-footer className="side-footer"></app-footer>
      </nz-content>
    </nz-layout>
  </nz-layout>
</nz-layout>

<app-fixbar (onCollapse)="onCollapseAll($event)" [collapsed]="collapsed()">
</app-fixbar>
